<template>
  <s-layout :bgStyle="{ color: '#f8f9fa' }" class="set-wrap" title="系统设置">
    <view class="header-box ss-flex-col ss-row-center ss-col-center">
      <image
          class="logo-img ss-m-b-46"
          :src="sheep.$url.cdn(appInfo.logo)"
          mode="aspectFit"
      ></image>
      <view class="name ss-m-b-24">{{ appInfo.name }}</view>
    </view>

    <view class="container-list">
      <uni-list :border="false">
        <uni-list-item
            title="当前版本"
            :rightText="appInfo.version"
            showArrow
            clickable
            :border="false"
            class="list-border"
            @tap="onCheckUpdate"
        />
        <uni-list-item
            title="本地缓存"
            :rightText="storageSize"
            showArrow
            :border="false"
            class="list-border"
        />
        <uni-list-item
            title="关于我们"
            showArrow
            clickable
            :border="false"
            class="list-border"
            @tap="
            sheep.$router.go('/pages/public/richtext', {
              title: '关于我们'
            })
          "
        />
        <!-- 为了过审 只有 iOS-App 有注销账号功能 -->
        <uni-list-item
            v-if="isLogin && sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"
            title="注销账号"
            rightText=""
            showArrow
            clickable
            :border="false"
            class="list-border"
            @click="onLogoff"
        />
      </uni-list>
    </view>

    <view class="set-footer ss-flex-col ss-row-center ss-col-center">
      <view class="agreement-box ss-flex ss-col-center ss-m-b-40">
        <view class="ss-flex ss-col-center ss-m-b-10">
          <view
              class="tcp-text"
              @tap="
              sheep.$router.go('/pages/public/richtext', {
                title: '用户协议'
              })
            "
          >
            《用户协议》
          </view>
          <view class="agreement-text">与</view>
          <view
              class="tcp-text"
              @tap="
              sheep.$router.go('/pages/public/richtext', {
                title: '隐私协议'
              })
            "
          >
            《隐私协议》
          </view>
        </view>
      </view>
      <view class="copyright-text ss-m-b-10">{{ appInfo.copyright }}</view>
      <view class="copyright-text">{{ appInfo.copytime }}</view>
    </view>

    <su-fixed bottom placeholder>
      <view class="ss-p-x-20 ss-p-b-40">
        <button
            class="loginout-btn ss-reset-button"
            @tap="onLogout"
            v-if="isLogin"
        >
          退出登录
        </button>
      </view>
    </su-fixed>
  </s-layout>
</template>

<style lang="scss" scoped>
.set-wrap {
  background-color: #f8f9fa;
}

.container-list {
  width: 100%;
  padding: 0 20rpx;
  margin-top: 20rpx;
  box-sizing: border-box; /* 确保padding不会增加总宽度 */
}

.set-title {
  margin: 0 30rpx;
}

.header-box {
  padding: 80rpx 0;

  .logo-img {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
  }

  .name {
    font-size: 42rpx;
    font-weight: 600;
    color: #333;
  }

  .version {
    font-size: 32rpx;
    font-weight: 500;
    line-height: 32rpx;
    color: $gray-b;
  }
}

.set-footer {
  margin: 100rpx 0 0 0;

  .copyright-text {
    font-size: 22rpx;
    font-weight: 500;
    color: $gray-c;
    line-height: 30rpx;
  }

  .agreement-box {
    font-size: 26rpx;
    font-weight: 500;

    .tcp-text {
      color: #3a8ee6; // 修改为蓝色
      font-weight: 500;
    }

    .agreement-text {
      color: $dark-9;
      margin: 0 8rpx;
    }
  }
}

.loginout-btn {
  width: 100%;
  height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: 500;
  background-color: #3a8ee6; // 修改为蓝色
  color: #ffffff;
  box-shadow: 0 8rpx 16rpx rgba(58, 142, 230, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 8rpx rgba(58, 142, 230, 0.3);
  }
}

.list-border {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  border-bottom: 1rpx solid #eeeeee;
  margin: 0 10rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
  overflow: hidden; /* 防止内容溢出 */
  width: auto; /* 自适应宽度 */
}

:deep(.uni-list) {
  background-color: transparent !important;
  width: 100%; /* 确保列表宽度为100% */
}

:deep(.uni-list-item__container) {
  padding: 24rpx 30rpx !important;
}

:deep(.uni-list-item__content) {
  flex: 1; /* 左侧内容区域占据剩余空间 */
  overflow: hidden; /* 防止内容溢出 */
}

:deep(.uni-list-item__content-title) {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

:deep(.uni-list-item__extra) {
  flex-shrink: 0; /* 防止右侧区域被压缩 */
  max-width: 40%; /* 限制右侧区域最大宽度 */
}

:deep(.uni-list-item__extra-text) {
  color: #999;
  font-size: 28rpx;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>

<script setup>
import sheep from '@/sheep';
import { computed, reactive } from 'vue';
import AuthUtil from '@/sheep/api/member/auth';

const appInfo = computed(() => sheep.$store('app').info);
const isLogin = computed(() => sheep.$store('user').isLogin);
const storageSize = uni.getStorageInfoSync().currentSize + 'Kb';
const state = reactive({
  showModal: false,
});

function onCheckUpdate() {
  sheep.$platform.checkUpdate();
  // 小程序初始化时已检查更新
  // H5实时更新无需检查
  // App 1.跳转应用市场更新 2.手动热更新 3.整包更新
}

// 注销账号
function onLogoff() {
  uni.showModal({
    title: '提示',
    content: '确认注销账号？',
    success: async function (res) {
      if (!res.confirm) {
        return;
      }
      const { code } = await AuthUtil.logout();
      if (code !== 0) {
        return;
      }
      sheep.$store('user').logout();
      sheep.$router.go('/pages/index/user');
    },
  });
}

// 退出账号
function onLogout() {
  uni.showModal({
    title: '提示',
    content: '确认退出账号？',
    success: async function (res) {
      if (!res.confirm) {
        return;
      }
      const { code } = await AuthUtil.logout();
      if (code !== 0) {
        return;
      }
      sheep.$store('user').logout();
      sheep.$router.go('/pages/index/user');
    },
  });
}
</script>
